<template>
    <div>
        <el-button class="btn" type="primary" size="small" @click="addTypeHandler">新增</el-button>
        <!-- 表格 -->
        <el-table :data="types" border style="width: 100%" size="small">
            <el-table-column fixed type="index" label="序号" width="80"></el-table-column>
            <el-table-column fixed prop="name" label="名称"></el-table-column>
            <el-table-column label="操作" align="center" width="120" fixed="right">
                <template slot-scope="scope">
                    <el-link @click="deleteHandler(scope.row.id)" :underline="false">删除</el-link>
                    <el-link class="borrow" @click="editHandler(scope.row)" :underline="false">修改</el-link>
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增 -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="60%">
            {{form}}
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveTypeHandler">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import request from '@/utils/request'
import qs from 'qs'
export default {
    data() {
        return {
            types: [],
            dialogVisible: false,
            form: {},
            title: ''
        }
    },
    created() {
        this.typeFindAll()
    },
    methods: {
        // 删除
        deleteHandler(id) {
            request.get("/assetType/deleteById",{params: {id}}).then(res => {
                if(res.data.status == 200) {
                    this.typeFindAll()
                    this.$notify({
                        title: '成功',
                        message: res.message,
                        type: 'success'
                    });
                } else {
                    this.$notify.error({
                        title: '错误',
                        message: res.message
                    });
                }
            })
        },

        // 新增
        addTypeHandler() {
            this.dialogVisible = true;
            this.title = "新增物品类型信息"
        },
        // 确认
        saveTypeHandler() {
            request.post("/assetType/saveOrUpdate",qs.stringify(this.form)).then(res => {
                console.log(res)
                this.dialogVisible = false;
                this.typeFindAll()
                this.$notify({
                    title: '成功',
                    message: res.message,
                    type: 'success'
                });
            })
        },

        // 修改
        editHandler(row) {
            this.dialogVisible = true
            this.form = row;
            this.title = "修改物品类型信息"
        },

        // 查询所有类型
        typeFindAll() {
            request.get("/assetType/findAll").then(res => {
                this.types = res.data
            })
        }
    }
}
</script>
<style scoped>
    .btn {
        margin-bottom: .5rem;
    }
    .el-icon-delete {
        margin-right: .5rem;
    }
</style>